<template>
  <div class="userBaseInfoComp">
    <div class="userBaseInfoDesc h100">
      <div class="userBaseInfoDescCircle">{{ getWordFirst(userInfo.account) }}</div>
      <div class="userBaseInfoDescAccount">
        <p class="username mb8">{{ userInfo.account }}</p>
        <p class="role">{{ roles }}</p>
      </div>
    </div>
    <div class="h100 userBaseInfoModuleSum">
      <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
      <div class="sumItem" @click="goTo('/software/vehicleVersion')">
        <p class="sumNumber mb8">
          <table-ellipsis :text="info.vehicleVersionCount"></table-ellipsis>
        </p>
        <p class="sumTitle ">{{ $t('vehicleVersionCount') }}</p>
      </div>
      <div class="sumItem" @click="goTo('/software/partsSoftwareList')">
        <p class="sumNumber mb8">
          <table-ellipsis :text="info.versionCount"></table-ellipsis>
        </p>
        <p class="sumTitle">{{ $t('ecuVersionCount') }}</p>
      </div>
      <div class="sumItem" @click="goTo('/management/car/ecu')">
        <p class="sumNumber mb8">
          <table-ellipsis :text="info.ecuCount"></table-ellipsis>
        </p>
        <p class="sumTitle">{{ $t('ecuCount') }}</p>
      </div>
      <div class="sumItem" @click="goTo('/management/car/prod')">
        <p class="sumNumber mb8">
          <table-ellipsis :text="info.vehicleCount"></table-ellipsis>
        </p>
        <p class="sumTitle ">{{ $t('vehicleCount') }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import statisticsApi from '@/api/modules/statistics'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
const initInfo = {
  // 车辆版本
  vehicleVersionCount: 0,
  // 车辆
  vehicleCount: 0,
  // 零件版本
  versionCount: 0,
  // 零件
  ecuCount: 0
}
export default {
  components: {
    FullParentDomWithDask,
    TableEllipsis
  },
  computed: {
    userInfo () {
      return this.$store.state.user.userInfo
    },
    roles () {
      return this.userInfo.roles ? this.userInfo.roles.map(item => item.name).join(' / ') : []
    }
  },
  data () {
    return {
      loading: true,
      info: { ...initInfo }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    goTo (path) {
      this.$router.push({
        path
      })
    },
    loadData () {
      this.info = { ...initInfo }
      this.loading = true
      statisticsApi.getResourceCountData().then(res => {
        const { data } = res
        if (!data) {
          return
        }
        Object.keys(this.info).forEach(key => {
          if (typeof data[key] !== 'undefined') {
            this.info[key] = data[key]
          }
        })
      }).finally(() => {
        this.loading = false
      })
    },
    getWordFirst (text) {
      if (!text) return ''
      const first = text.charAt(0)
      if (/[a-z]/i.test(first)) {
        return first.toUpperCase()
      }
      return first
    }
  }
}
</script>

<style scoped lang="less">
.userBaseInfoComp {
  display: flex;
  line-height: 1;

  .userBaseInfoDesc {
    flex: none;
    display: flex;
    align-items: center;
  }

  .userBaseInfoDescCircle {
    margin-right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #2bb080;
    text-align: center;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    line-height: 46px;
  }

  .userBaseInfoDescAccount {
    .username {
      font-size: 16px;
      font-weight: 500;
      color: #0F0F0F;
    }

    .role {
      color: #9F9F9F;
      font-size: 12px;
    }
  }

  .userBaseInfoModuleSum {
    flex: 1 0 0;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: flex-end;

    .sumItem {
      margin-right: 48px;
      cursor: pointer;

      &:hover {
        color: @primary-color;
        .sumTitle {
          color: @primary-color
        }
      }

      &:nth-last-child(1) {
        margin-right: 0;
      }
    }

    .sumTitle {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
    }

    .sumNumber {
      font-size: 26px;
    }
  }
}
</style>
